/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:42:43 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2022-07-11 08:10:43
 */

import { useRef } from "react";
import Transition from "three-base/Transition";
import styles from "./AnimationBtn.module.less";
import Button from "antd/lib/button";



// 动画按钮demo 
// css3 会消耗gpu算力资源 尽量使用 Transition 动画对象
export const AnimationBtn = () => {

    const btn = useRef<HTMLElement>(null);

    // 1.创建过度动画对象
    const tansition = new Transition({ left: 0 });

    // 2.设置回调事件
    tansition.setDelay(100).setDuration(1000).onChange(({ left }) => {
        if (btn.current) {
            btn.current.style.left = `calc(50% + ${left}px)`;
        }
    });

    return (
        <Button
            ref={btn}
            className={styles.animationBtn}
            onClick={() => {

                // 3. 修改动画参数
                const left = tansition.get("left");
                tansition.setDelay(100).setDuration(1000).set({ left: left === 0 ? 300 : 0 });
            }}
        >
            按钮动画
        </Button>
    );


}